<template>
	<view>
		<view class="select-box" @click.stop="open">
			<text v-if="!tagList">{{placeholder}}</text>
			<text class="val-box" v-else>{{tagList | filterName}}</text>
			<uni-icons class="icon" type="down" size="20"></uni-icons>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="transparent" class="popup-box">
			<view class="popup-content-box">
				<view class="popup-title">
					<text class="name">请选择</text>
					<text class="close" @tap.stop="closePopup">x</text>
				</view>
				<view class="list-box">
					<view class="left-box">
						<view v-for="item in list" :key="item.value" :class="[levalOne == item.value?'active':'']" :data-crt="item" @tap.stop="itemsClick">
							<text class="items">{{item.label}}</text>
						</view>
					</view>
					<view class="right-box" v-if="children.length">
						<view v-for="childItem in children" :key="childItem.value" :class="[childrenActive.includes(childItem.value) ? 'child-active':'']" :data-crt="childItem" @tap.stop="childrenItemClick">
							<text class="items">{{childItem.label}}</text>
						</view>
					</view>
				</view>
				<view class="popup-btn-box">
					<text class="btn" @tap.stop="cancel">取消</text>
					<text class="btn" @tap.stop="confirm">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props:{
			placeholder:{
				type:String,
				default:'请选择'
			},
			tagShow:{
				type:Number,
				default: 1
			},
			list:{
				type:Array,
				default:()=>([
					{
						label:'leval1',
						value:"001",
						children:[
							{
								label:'leval1-1',
								value:"001-1",
							},
							{
								label:'leval1-2',
								value:"001-2",
							}
						]
					},
					{
						label:'leval2',
						value:"002",
						children:[
							{
								label:'leval2-1',
								value:"002-1",
							},
							{
								label:'leval2-2',
								value:"002-2",
							}
						]
					}
				])
			}
		},
		filters:{
			filterName(val){
				return val
			}
		},
		data() {
			return {
				levalOne:undefined,
				childrenActive:[],
				childrenActiveName:[],
				tagList:'',
				selectVal:[],
				children:[]
			}
		},
		methods: {
			open(){
				this.$refs.popup.open()
			},
			cancel(){
				this.levalOne = undefined;
				this.childrenActive=[]
				this.childrenActiveName=[]
				this.closePopup()
			},
			confirm(){
				let selectList = this.childrenActiveName
				this.tagList =selectList.slice(0, this.tagShow).join('/')
				console.log(this.tagList)
				this.$emit('click', [this.levalOne, ...this.childrenActive])
				this.closePopup()
			},
			childrenItemClick(event){
				let {dataset:{crt}} = event.currentTarget
				let val = crt.value
				let name = crt.label
				console.log(name)
				if(this.childrenActive.includes(val)){
					let index = this.childrenActive.findIndex(item=> item == val)
					this.childrenActive = this.childrenActive.splice(index, 1)
					this.childrenActiveName = this.childrenActiveName.splice(index, 1)
				}else{
					this.childrenActive.push(val)
					this.childrenActiveName.push(name)
				}
			},
			itemsClick(event){
				let {dataset:{crt}} = event.currentTarget
				this.children = crt.children
				this.levalOne = crt.value
			},
			closePopup(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
.select-box{
	display:flex;
	align-item:center;
	.val-box{
		display:inline-block;
		line-height:21px;
		min-width:50rpx;
	}
	.icon{
		margin-left: 10rpx;
	}
}
.popup-box{
	.popup-title{
		display: flex;
		align-items: center;
		height: 80rpx;
		border-bottom: 1px solid #f3f3f3;
		padding: 0 32rpx;
		.name{
			flex-grow: 1;
			text-align:center;
		}
		.close{
			width: 40rpx;
		}
	}
	.popup-content-box{
		position: relative;
		width:100%;
		height: 50vh;
		background-color: #fff;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		padding-bottom:20rpx;
	}
	.list-box{
		display: flex;
		justify-content: space-between;
		padding:0 32rpx;
		min-height: calc(100% - 180rpx);
	}
	.left-box{
		flex:1;
		max-width: 50%;
		.active{
			background-color:blue;
			color: #fff;
		}
		> view{
			padding: 0 10rpx;
			&:not(:first-child){
				margin-top: 10rpx;
			}
		}
	}
	.right-box{
		flex:1;
		margin-left: 10rpx;
		max-width: 50%;
		border-left: 1px solid #f3f3f3;
		padding-left: 20rpx;
		.child-active{
			background-color:blue;
			color: #fff;
		}
		> view{
			padding: 0 10rpx;
			&:not(:first-child){
				margin-top: 10rpx;
			}
		}
	}
	.items{
		line-height: 80rpx;
		width:100%;
		white-space:nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.popup-btn-box{
		display:flex;
		align-items: center;
		height:80rpx;
		padding: 20rpx 32rpx;
		border-top: 1px solid #f3f3f3;
		.btn{
			display: flex;
			height: 100%;
			flex: 1;
			border: 1px solid #f3f3f3;
			border-radius: 8rpx;
			align-items: center;
			justify-content: center;
			margin-right: 10rpx;
			+.btn{
				margin-left: 10rpx;
			}
			&:last-child{
				margin-right:0;
			}
		}
	}
}
</style>
